var xml= new XMLHttpRequest()
var uls=document.querySelector('.uls')
xml.open('get','./data.json',true)

xml.send();

xml.onreadystatechange=()=>{
    if(xml.readyState==4){

        if(xml.status==200){
            var data=JSON.parse(xml.responseText)

            uls.innerHTML=data.map((v,i)=>{
                return `
                    <li>
                        <h3>${v.title}</h3>
                        <div>
                            ${v.child.map((a,b)=>{
                                return `<p>${a}</p>`
                            }).join('')}
                        </div>
                    </li>
                `
            }).join('')

            uls.addEventListener('click',(e)=>{
                var t=e.target;
                if(t.nodeName=='H3'){

                   var ons=document.querySelector('.on');
                   if(ons){
                       ons.classList.remove('on')
                   }
                    t.classList.add('on');
                   var oms=document.querySelector('.om');
                   if(oms){
                       oms.classList.remove('om')
                   }
                   t.nextElementSibling.classList.add('om')
                }
            })

        }
    }
}
// document.body.nextElementSibling
